<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>洛可可白⚡️俄罗斯方块</title>
    <style>
      h2 {
        font-size: 19px;
        text-align: center;
      }

      #tetris {
        width: 240px;
        margin: 0 auto;
        background-color: #d5d5d5;
        border-radius: 10px;
        padding: 25px;
      }

      #game-board {
        width: 200px;
        height: 400px;
        border: 4px solid #4b6014;
        position: relative;
        border-radius: 10px;
        background-color: #f4f126;
        margin: 0 auto;
      }

      #score {
        text-align: center;
        margin-top: 10px;
      }

      .block {
        width: 20px;
        height: 20px;
        position: absolute;
        background-color: #000;
        border: 1px solid #3a3a3a;
        box-sizing: border-box;
      }
    </style>
  </head>

  <body>
    <h2>俄罗斯方块</h2>
    <div id="tetris">
      <div id="game-board"></div>
      <div id="score">Score: <span id="score-value">0</span></div>
    </div>
  </body>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const board = document.getElementById("game-board");
      const scoreValue = document.getElementById("score-value");
      const blockSize = 20;
      const rows = 20;
      const cols = 10;
      let score = 0;
      let boardGrid = Array.from(Array(rows), () => new Array(cols).fill(0));
      let currentShape;
      let currentRow;
      let currentCol;

      function createShape() {
        const shapes = [
          [[1, 1, 1, 1]],
          [
            [1, 1],
            [1, 1],
          ],
          [
            [1, 1, 0],
            [0, 1, 1],
          ],
          [
            [0, 1, 1],
            [1, 1, 0],
          ],
          [
            [1, 1, 1],
            [0, 1, 0],
          ],
          [
            [1, 1, 1],
            [1, 0, 0],
          ],
          [
            [1, 1, 1],
            [0, 0, 1],
          ],
        ];
        const randomIndex = Math.floor(Math.random() * shapes.length);
        const shape = shapes[randomIndex];
        currentShape = shape;
        currentRow = 0;
        currentCol = Math.floor(cols / 2) - Math.floor(shape[0].length / 2);
      }

      function drawBoard() {
        board.innerHTML = "";
        for (let row = 0; row < rows; row++) {
          for (let col = 0; col < cols; col++) {
            if (boardGrid[row][col]) {
              const block = document.createElement("div");
              block.className = "block";
              block.style.top = row * blockSize + "px";
              block.style.left = col * blockSize + "px";
              board.appendChild(block);
            }
          }
        }
      }

      function drawCurrentShape() {
        for (let row = 0; row < currentShape.length; row++) {
          for (let col = 0; col < currentShape[row].length; col++) {
            if (currentShape[row][col]) {
              const block = document.createElement("div");
              block.className = "block";
              block.style.top = (currentRow + row) * blockSize + "px";
              block.style.left = (currentCol + col) * blockSize + "px";
              board.appendChild(block);
            }
          }
        }
      }

      function checkCollision() {
        for (let row = 0; row < currentShape.length; row++) {
          for (let col = 0; col < currentShape[row].length; col++) {
            if (currentShape[row][col]) {
              const newRow = currentRow + row;
              const newCol = currentCol + col;
              if (
                newRow >= rows ||
                newCol < 0 ||
                newCol >= cols ||
                boardGrid[newRow][newCol]
              ) {
                return true;
              }
            }
          }
        }
        return false;
      }

      function mergeShape() {
        for (let row = 0; row < currentShape.length; row++) {
          for (let col = 0; col < currentShape[row].length; col++) {
            if (currentShape[row][col]) {
              const newRow = currentRow + row;
              const newCol = currentCol + col;
              boardGrid[newRow][newCol] = 1;
            }
          }
        }
      }

      function clearRows() {
        for (let row = rows - 1; row >= 0; row--) {
          if (boardGrid[row].every((cell) => cell)) {
            boardGrid.splice(row, 1);
            boardGrid.unshift(new Array(cols).fill(0));
            score++;
          }
        }
      }

      function updateScore() {
        scoreValue.textContent = score;
      }

      function moveDown() {
        currentRow++;
        if (checkCollision()) {
          currentRow--;
          mergeShape();
          clearRows();
          updateScore();
          createShape();
          if (checkCollision()) {
            gameOver();
          }
        }
      }

      function moveLeft() {
        currentCol--;
        if (checkCollision()) {
          currentCol++;
        }
      }

      function moveRight() {
        currentCol++;
        if (checkCollision()) {
          currentCol--;
        }
      }

      function rotateShape() {
        const rotatedShape = currentShape[0].map((_, colIndex) =>
          currentShape.map((row) => row[colIndex]).reverse()
        );
        const prevShape = currentShape;
        currentShape = rotatedShape;
        if (checkCollision()) {
          currentShape = prevShape;
        }
      }

      function gameOver() {
        alert("Game Over");
        resetGame();
      }

      function resetGame() {
        score = 0;
        boardGrid = Array.from(Array(rows), () => new Array(cols).fill(0));
        updateScore();
        createShape();
      }

      function handleKeyPress(event) {
        switch (event.key) {
          case "ArrowDown":
            moveDown();
            break;
          case "ArrowLeft":
            moveLeft();
            break;
          case "ArrowRight":
            moveRight();
            break;
          case "ArrowUp":
            rotateShape();
            break;
        }
        drawBoard();
        drawCurrentShape();
      }

      function startGame() {
        createShape();
        setInterval(() => {
          moveDown();
          drawBoard();
          drawCurrentShape();
        }, 500);
        document.addEventListener("keydown", handleKeyPress);
      }

      startGame();
    });
  </script>
</html>
